﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CallbackTest.aspx.cs" Inherits="BugSysSolution.AjaxCallBack.CallbackTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="../Style/site.css" rel="stylesheet" type="text/css" />
    <script src="../Javascript/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../Javascript/common.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="div1" style="border:1px solid red;position:absolute;width:500px;height:500px;top:0px;left:0px">
        <table id="tab1" class="tab">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>公司</td>
                    <td>职位</td>
                </tr>
            </thead>
        </table>
        <input type="button" id="btnAdd" value="Add" style="width:100px"/>
    </div>
    <div style="border:1px solid black;display:none;text-align:center" id="loading">loading...</div>
    </form>
</body>
</html>
<script type="text/javascript">
    //部门ID假设为5
    var deptid = 5;
    var source = null;
    function addtr(data) {
        var selhtml = "";
        for (var i = 0; i < data.value.length; i++) {
            selhtml += "<option value='" + data.value[i] + "'>" + data.text[i] + "</option>";
        }
        
        var html = "";
        html += "<tr>";
        html += "<td><input type='text' /></td>";
        html += "<td><select tag='selcompany'>" + selhtml + "</select></td>";
        html += "<td><input type='text' /></td>";
        html += "</tr>";

        $("#tab1").append(html);
    }

    function SendAjaxRequest() {
        SendAjax("get", "ajaxrequest.aspx", { tag: "1" }, "", function (data) {
            data = eval('(' + data + ')');
            source = data;
            $("#loading").css("display", "none");
            addtr(data);
        });
    }

    $("#btnAdd").click(function () {
        if (source == null) {
            alert("请求服务器中....");
            showloadingdiv($("#div1"));
            SendAjaxRequest();
        }
        else {
            alert("请求服务器完毕!");
            addtr(source);
        }
    })

    function showloadingdiv(divobj) {
        var top = $(divobj).css("top");
        var left = $(divobj).css("left");
        var height = $(divobj).css("height");
        var width = $(divobj).css("width");
        $("#loading").css("display", "block")
            .css("position", "absolute")
            .css("top", top)
            .css("left", left)
            .css("height", height)
            .css("width", width)
            .css("background-color", "skyblue")
            .css("line-height", height);
    }
</script>